<template>
  <div>
    <el-card class="m-t-15 box-card">

      <div slot="header" class="flex-cls-nowrap-spc-btw">
        <span>复杂的表格导出</span>
      </div>

      <!-- 查询条件 -->
      <div ref="searchForm" class="search-form">
        <m-form
          inline
          is-button
          form-type="search"
          size="mini"
          :options="searchForm.options"
          :all-btn="searchForm.btnList"
          @search="(funtion)=> searchForm.initSearch(funtion)"
          @get-model="(form)=> searchForm.form = form"
          @save="search"
        />
      </div>

      <!-- 全局按钮 -->
      <!-- <m-all-btn class="m-b-10" :button-list="overallBtn" /> -->

      <!-- 表格  -->
      <div class="report-forms">
        <el-table
          ref="reportTableRef"
          v-loading="dataGrid.loading"
          :data="dataGrid.data"
          :height="dataGrid.height"
          border
        >
          <el-table-column>
            <template #header>
              <div class="head">
                <div class="w1">{{ searchForm.form?.reportType || '' }}</div>
                <div class="w2">总数</div>
                <div class="w2">{{ tableHead.amount || 0 }}</div>
                <div class="w2">{{ tableHead.goodAmount || 0 }}</div>
                <div class="w2">{{ tableHead.goodRate || 0 }}</div>
                <div class="w2 warning-bg">{{ tableHead.ngRate || 0 }}</div>
                <div class="box1">
                  <div class="w3">责任划分</div>
                  <div class="w3">不良率</div>
                  <div class="w3">{{ tableHead.ngTotalAmount || 0 }}</div>
                </div>
                <div v-for="(item, index) in ngList" :key="item.name" class="box2">
                  <div
                    :style="{ borderRight: index == ngList.length - 1 ? '1px solid #EBEEF5' : '' }"
                    class="warning-bg"
                  />
                  <div class="w2 warning-bg">{{ item.unqualifiedRateObj }}</div>
                  <div class="w2">{{ item.amountObj }}</div>
                </div>

                <div v-for="(item, key) in userNgList" :key="item.name" class="box3">
                  <div class="flex-center">
                    <span v-if="key === 0">客户责任</span>
                  </div>
                  <div
                    class="w2"
                    :style="{ borderRight: key == userNgList.length - 1 ? 'none' : '' }"
                  >
                    {{ item.unqualifiedRateObj }}</div>
                  <div
                    class="w2"
                    :style="{ borderRight: key == userNgList.length - 1 ? 'none' : '' }"
                  >
                    {{ item.amountObj }}</div>
                </div>

              </div>
            </template>
            <el-table-column prop="date" label="日期" width="100" align="center" />
            <el-table-column prop="userName" label="客户" width="100" align="center" />
            <el-table-column prop="name" label="品名" width="120" align="center" />
            <el-table-column prop="incomingModel" label="素材类型" width="120" align="center" />
            <el-table-column prop="Model" label="型号" width="120" align="center" />
            <el-table-column prop="totalAmount" label="投入数" width="120" align="center" />
            <el-table-column prop="goodAmount" label="良品数" width="120" align="center" />
            <el-table-column prop="goodRate" label="良率" width="120" align="center" />
            <el-table-column prop="ngRate" label="不良率" width="120" align="center" />
            <el-table-column align="center" label="不良总数" prop="ngTotalAmount" width="90" />
            <el-table-column
              v-for="item in ngList"
              :key="item.id"
              :prop="item.id + '-'"
              :label="item.name + ''"
              align="center"
              width="120"
            />
            <el-table-column
              v-for="item in userNgList"
              :key="item.id"
              :prop="item.id + '-'"
              :label="item.name + ''"
              align="center"
              width="120"
            />
          </el-table-column>
        </el-table>
      </div>
    </el-card>

  </div>
</template>

<script>

// 混入 minxin 文件夹下面所有的js文件
const files = require.context("./mixins", false, /\.js$/);
const minxins = [];
files.keys().forEach(key => {
  minxins.push(files(key).default || files(key));
});

export default {
  name: "UseDataGrid",
  mixins: [...minxins]
};
</script>

<style lang="scss">
.report-forms {
    .el-table__header {
        padding: 0 !important;

        .cell {
            padding: 0 !important;
        }
    }
}
</style>

<style lang="scss" scoped src="./index.scss"></style>
